<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="/css/style1.css" rel="stylesheet" type="text/css"/>
    <link href="/js/plugins/dialog2/dialog.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/js/plugins/tab.js"></script>
    <script type="text/javascript" src="/js/popUP.js"></script>
    <script type="text/javascript" src="/js/plugins/jrender/jrender.min.js"></script>
    <script type="text/javascript" src="/js/plugins/dialog2/dialog.min.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script>
        var user = JSON.parse(sessionStorage.getItem("user"));
        $(function () {
            if (user) {
                //全部列表里面已付款的商品
                var num;
                $.get("/myOrders/paids", {pageSize: 0,userId:user.id}, function (data) {
                    var cutoff = 1;
                    $("#paid").renderValues(data, {
                        getNum:function (item,value) {
                            num=value;
                            $(item).html(value)
                        },
                        getHref: function (item, value) {
                            var url = $(item).data("href");
                            $(item).attr("href", url + value);
                        },
                        getSalePrice:function (item,value) {
                            $(item).html("原价:￥"+value+"*"+num)
                        },
                        getCutOff:function(item,value){
                            cutoff = value;
                        },
                        getCostPrice:function (item,value) {
                            $(item).html((Number(value) * Number(cutoff))+"*"+num)
                        }
                    });
                })
                //全部列表里面待付款的商品
                $.get("/myOrders/obligation", {pageSize: 0,userId:user.id}, function (data) {
                    $("#obligation").renderValues(data, {
                        getNum:function (item,value) {
                            num=value;
                            $(item).html(value)
                        },
                        getHref: function (item, value) {
                            var url = $(item).data("href");
                            $(item).attr("href", url + value);
                        },
                        getSalePrice:function (item,value) {
                            $(item).html("原价:￥"+value+"*"+num)
                        },
                        getCutOff:function(item,value){
                        cutoff = value;
                        },
                        getCostPrice:function (item,value) {
                            $(item).html((Number(value) * Number(cutoff))+"*"+num)
                        }
                    });
                    $("#obligation1").renderValues(data, {
                        getNum:function (item,value) {
                            num=value;
                            $(item).html(value)
                        },
                        getHref: function (item, value) {
                            var url = $(item).data("href");
                            $(item).attr("href", url + value);
                        },
                        getSalePrice:function (item,value) {
                            $(item).html("原价:￥"+value+"*"+num)
                        },
                        getCutOff:function(item,value){
                            cutoff = value;
                        },
                        getCostPrice:function (item,value) {
                            $(item).html((Number(value) * Number(cutoff))+"*"+num)
                        }
                    });
                    //给取消订单绑定点击事件
                    $(".cancel").click(function () {
                        var id = $(this).data("id");
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: true,
                            content: '确定要取消订单吗',
                            onClickConfirmBtn: function () {
                                //alert('你点了“确定”按钮');
                                //发送ajax删除订单
                                $.ajax({
                                    url:'/myOrders/'+id,
                                    method:'delete',
                                    success:function () {
                                        $(document).dialog({
                                            productNameShow: false,
                                            content: '订单已取消',
                                        });
                                        setTimeout(function () {
                                            window.location.reload();
                                        },1000)
                                    }
                                })
                            },
                            onClickCancelBtn: function () {
                                //alert('你点了“取消”按钮');
                            },
                            onClickCloseBtn: function () {
                                //alert('你点了“关闭”按钮');
                            }
                        });

                    })
                    //立即付款
                    $(".payNow").click(function () {
                        var id = $(this).data("pay");
                        window.location.href="/mine/pay.html?id="+id;
                    })
                })
                //查询所有订单数回显
                $.get("/myOrders/"+user.id,function (data) {
                    $("#totalCount").html(data+"+");
                })
                //查询未付款条数回显
                $.get("/myOrders/"+user.id+"/obligation",function (data) {
                    $("#obligationCount").html(data+"+");
                })

            }
        })
    </script>

</head>
<body>


<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed b-line">
        <a href="/mine/profiles.html" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-productName">我的订单</span>
        </div>
        <a href="javascript:;" class="aui-navBar-item">
            <i class="icon icon-more"></i>
            <span class="badge badge-hollow" id="totalCount">9+</span>
        </a>
    </header>
    <section class="aui-scrollView">
        <div class="aui-tab" data-ydui-tab>
            <ul class="tab-nav">
                <li class="tab-nav-item tab-active">
                    <a href="javascript:;">全部</a>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">待付款</a>
                    <span class="badge badge-hollow" id="obligationCount">5</span>
                </li>
               <!-- <li class="tab-nav-item">
                    <a href="javascript:;">待发货</a>
                    <span class="badge badge-hollow">15</span>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">待收货</a>
                    <span class="badge badge-hollow">9</span>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">评价</a>
                    <span class="badge badge-hollow">25</span>
                </li>-->
            </ul>
            <!--全部-->
            <div class="divHeight"></div>
            <div class="tab-panel">
                <div class="tab-panel-item tab-active">
                    <!--已付款-->
                    <div class="tab-item" id="paid">
                        <div render-loop="list">
                            <div>
                                <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear b-line">
                                    <div class="aui-well-item-bd">
                                        <h3 render-html="list.createTime"></h3>
                                    </div>
                                    <span class="aui-well-item-fr">订单关闭</span>
                                </a>
                                <div class="aui-mail-product b-line">
                                    <a data-href="/shop/details.html?id=" render-key="list.product.id"
                                       render-fun="getHref" class="aui-mail-product-item">
                                        <div class="aui-mail-product-item-hd">
                                            <img render-src="list.product.coverUrl" alt="">
                                        </div>
                                        <div class="aui-mail-product-item-bd">
                                        <p render-html="list.product.productName"></p>
                                        </div>
                                        <div class="aui-mail-product-right">
                                            数量x<span render-key="list.number" render-fun="getNum">1</span>
                                            <h4 render-key="list.product.salePrice" render-fun="getSalePrice"></h4>
                                            <div>
                                                <span render-html="list.size">尺寸</span>码
                                                <span render-html="list.color">颜色</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <a href="javascript:;" class="aui-mail-payment">
                                    <p>
                                        共<em render-html="list.number">1</em>
                                        <span render-key="list.product.cutoff" render-fun="getCutOff"></span>
                                        件商品 实付款:¥ <i render-key="list.product.salePrice" render-fun="getCostPrice">￥6899.00</i>
                                    </p>
                                </a>
                                <div class="aui-mail-button">
                                    <a href="javascript:;" class="aui-df-color" data-href="/shop/details.html?id=" render-key="list.product.id"
                                       render-fun="getHref">再次购买</a>
                                </div>
                                <div class="divHeight">

                                </div>
                            </div>
                        </div>
                    </div>


                    <!--待付款-->
                    <div class="tab-item" id="obligation">
                        <div render-loop="list">
                            <div>
                                <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear b-line">
                                    <div class="aui-well-item-bd">
                                        <h3 render-html="list.createTime">2018-10-11</h3>
                                    </div>
                                    <span class="aui-well-item-fr aui-well-item-fr-clear">待付款</span>
                                </a>
                                <div class="aui-mail-product b-line">
                                    <a data-href="/shop/details.html?id=" render-key="list.product.id"
                                       render-fun="getHref"  class="aui-mail-product-item">
                                        <div class="aui-mail-product-item-hd">
                                            <img render-src="list.product.coverUrl" alt="">
                                        </div>
                                        <div class="aui-mail-product-item-bd">
                                            <p render-html="list.product.productName">Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机Apple 苹果 iPhone8 Plus 4G手机 深空灰
                                                移动联通版64G裸机</p>
                                        </div>
                                        <div class="aui-mail-product-right">
                                            数量x<span render-key="list.number" render-fun="getNum">1</span>
                                            <h4 render-key="list.product.salePrice" render-fun="getSalePrice"></h4>
                                            <div>
                                                <span render-html="list.size">尺寸</span>码
                                                <span render-html="list.color">颜色</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <a href="javascript:;" class="aui-mail-payment">
                                    <p>
                                        共<em render-html="list.number">1</em>
                                                        <span render-key="list.product.cutoff" render-fun="getCutOff"></span>
                                        件商品 实付款:¥ <i render-key="list.product.salePrice" render-fun="getCostPrice">￥6899.00</i>
                                    </p>
                                </a>
                                <div class="aui-mail-button">
                                    <a href="javascript:;" class="payNow" render-attr="data-pay=list.id">立即付款</a>
                                    <a href="javascript:;" class="aui-df-color ClickMe cancel" render-attr="data-id=list.id">取消订单</a>
                                </div>
                                <div class="divHeight"></div><!--换行-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-panel-item">
                    <div class="tab-item" id="obligation1">
                        <div render-loop="list">
                            <div>
                                <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear b-line">
                                    <div class="aui-well-item-bd">
                                        <h3 render-html="list.createTime">2018-10-11</h3>
                                    </div>

                                    <span class="aui-well-item-fr aui-well-item-fr-clear">待付款</span>
                                </a>
                                <div class="aui-mail-product b-line">
                                    <a data-href="/shop/details.html?id=" render-key="list.product.id"
                                       render-fun="getHref"  class="aui-mail-product-item">
                                        <div class="aui-mail-product-item-hd">
                                            <img render-src="list.product.coverUrl" alt="">
                                        </div>
                                        <div class="aui-mail-product-item-bd">
                                            <p render-html="list.product.productName">Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机Apple 苹果 iPhone8 Plus 4G手机 深空灰
                                                移动联通版64G裸机</p>
                                        </div>
                                        <div class="aui-mail-product-right">
                                            数量x<span render-key="list.number" render-fun="getNum">1</span>
                                            <h4 render-key="list.product.salePrice" render-fun="getSalePrice"></h4>
                                            <div>
                                                <span render-html="list.size">尺寸</span>码
                                                <span render-html="list.color">颜色</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <a href="javascript:;" class="aui-mail-payment">
                                    <p>
                                        共<em render-html="list.number">1</em>
                                        <span render-key="list.product.cutoff" render-fun="getCutOff"></span>
                                        件商品 实付款:¥ <i render-key="list.product.salePrice" render-fun="getCostPrice">￥6899.00</i>
                                    </p>
                                </a>
                                <div class="aui-mail-button">
                                    <a href="javascript:;" class="payNow" render-attr="data-pay=list.id">立即付款</a>
                                    <a href="javascript:;" class="aui-df-color ClickMe cancel"  render-attr="data-id=list.id">取消订单</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-panel-item">
                    <div class="tab-item">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear b-line">
                            <div class="aui-well-item-bd">
                                <h3>2018-10-11</h3>
                            </div>

                            <span class="aui-well-item-fr aui-well-item-fr-clear">待付款</span>
                        </a>
                        <div class="aui-mail-product b-line">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd">
                                    <img src="/img/pd-002.png" alt="">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机Apple 苹果 iPhone8 Plus 4G手机 深空灰
                                        移动联通版64G裸机</p>
                                </div>
                                <div class="aui-mail-product-right">
                                    <h4>￥4999.00</h4>
                                    <span>x1</span>
                                </div>
                            </a>
                        </div>
                        <a href="javascript:;" class="aui-mail-payment">
                            <p>
                                共<em>1</em>
                                件商品 实付款: <i>￥6899.00</i>
                            </p>
                        </a>
                        <div class="aui-mail-button">
                            <a href="javascript:;">立即付款</a>
                            <a href="javascript:;" class="aui-df-color ClickMe">取消订单</a>
                        </div>
                    </div>
                </div>
                <div class="tab-panel-item">
                    <div class="tab-item">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear b-line">
                            <div class="aui-well-item-bd">
                                <h3>2018-10-11</h3>
                            </div>

                            <span class="aui-well-item-fr aui-well-item-fr-clear">待付款</span>
                        </a>
                        <div class="aui-mail-product b-line">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd">
                                    <img src="/img/pd-002.png" alt="">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机Apple 苹果 iPhone8 Plus 4G手机 深空灰
                                        移动联通版64G裸机</p>
                                </div>
                                <div class="aui-mail-product-right">
                                    <h4>￥4999.00</h4>
                                    <span>x1</span>
                                </div>
                            </a>
                        </div>
                        <a href="javascript:;" class="aui-mail-payment">
                            <p>
                                共<em>1</em>
                                件商品 实付款: <i>￥6899.00</i>
                            </p>
                        </a>
                        <div class="aui-mail-button">
                            <a href="javascript:;">确认收货</a>
                            <a href="javascript:;" class="aui-df-color ClickMe">查看物流</a>
                            <a href="javascript:;" class="aui-df-color ClickMe">再次购买</a>
                        </div>
                    </div>
                </div>
                <div class="tab-panel-item">
                    <div class="tab-item">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear b-line">
                            <div class="aui-well-item-bd">
                                <h3>2018-10-11</h3>
                            </div>

                            <span class="aui-well-item-fr aui-well-item-fr-clear">待付款</span>
                        </a>
                        <div class="aui-mail-product b-line">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd">
                                    <img src="/img/pd-002.png" alt="">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机Apple 苹果 iPhone8 Plus 4G手机 深空灰
                                        移动联通版64G裸机</p>
                                </div>
                                <div class="aui-mail-product-right">
                                    <h4>￥4999.00</h4>
                                    <span>x1</span>
                                </div>
                            </a>
                        </div>
                        <a href="javascript:;" class="aui-mail-payment">
                            <p>
                                共<em>1</em>
                                件商品 实付款: <i>￥6899.00</i>
                            </p>
                        </a>
                        <div class="aui-mail-button">
                            <a href="javascript:;">评价有礼</a>
                            <a href="javascript:;" class="aui-df-color ClickMe">查看订单</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
<div>
    <div id="aui-mask-box"></div>
    <div id="aui-dialog-box">
        <h3 class="aui-dialog-productName">请选择取消订单的理由</h3>
        <label class="cell-item">
            <label class="cell-right">
                <input type="radio" value="2" name="checkbox">
                <i class="cell-checkbox-icon"></i>
            </label>
            <span class="cell-left">收货人信息有误</span>
        </label>
        <label class="cell-item">
            <label class="cell-right">
                <input type="radio" value="2" name="checkbox">
                <i class="cell-checkbox-icon"></i>
            </label>
            <span class="cell-left">商品数量或款式需调整</span>
        </label>
        <label class="cell-item">
            <label class="cell-right">
                <input type="radio" value="2" name="checkbox">
                <i class="cell-checkbox-icon"></i>
            </label>
            <span class="cell-left">有更优惠的购买方案</span>
        </label>
        <label class="cell-item">
            <label class="cell-right">
                <input type="radio" value="2" name="checkbox">
                <i class="cell-checkbox-icon"></i>
            </label>
            <span class="cell-left">商品缺货</span>
        </label>
        <label class="cell-item">
            <label class="cell-right">
                <input type="radio" value="2" name="checkbox">
                <i class="cell-checkbox-icon"></i>
            </label>
            <span class="cell-left">我不想买了</span>
        </label>
        <label class="cell-item">
            <label class="cell-right">
                <input type="radio" value="2" name="checkbox">
                <i class="cell-checkbox-icon"></i>
            </label>
            <span class="cell-left">其他原因</span>
        </label>

        <div class="close1">
            <a href="javascript:void(0)" class="aui-close">取消</a>
            <a href="javascript:void(0)" class="aui-close">确认</a>
        </div>

    </div>
</div>
</body>


</html>
